<template>
  <HeadContainer class="mine-earnings px-0" :title="$t('title.earn')" @back="goBack">
    <div class="margin-37 d-flex align-center justify-center">
      <MoneyCard :amount="balance" :showRevDtl="true" @onPage="navigate(`revenue-details`)"></MoneyCard>
    </div>
    <div class="px-4">
      <div class="d-flex justify-space-evenly gap-row-16 mt-4">
        <BlockButton
          :label="$t('label.withDrawRecord')"
          :is-gradient="false"
          @click="navigate(`withdrawal-history`)"
        ></BlockButton>
        <BlockButton
          :label="$t('label.withDrawRequest')"
          :is-gradient="false"
          @click="navigate(`withdrawal-request`)"
        ></BlockButton>
      </div>
      <v-divider class="mt-4"></v-divider>
      <div class="mt-4 mx-4">
        <div class="text-white font-size-14 font-style-normal font-wight-500 line-height-140">
          {{ $t('info.earnDashboard') }}
        </div>
      </div>
    </div>
    <div class="mt-4">
      <MediaTabs v-model="tab" :tabs="tabs"></MediaTabs>
      <div class="px-4">
        <MinePerformanceTotal v-show="tab === 'total'"></MinePerformanceTotal>
        <MinePerformanceMedia v-show="tab === 'media'"></MinePerformanceMedia>
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import MinePerformanceMedia from '@/pages/mine/MineEarn/MinePerformanceMedia.vue'
import MinePerformanceTotal from '@/pages/mine/MineEarn/MinePerformanceTotal.vue'
import { useEarnStore } from '@/store/earn'
import { $t } from '@/i18n'
import BlockButton from '@/components/button/BlockButton.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import MoneyCard from '@/components/mine/MoneyCard.vue'
import MediaTabs from '@/components/tabs/MediaTabs.vue'

const earnStore = useEarnStore()
const { turnOff, refreshBalance } = earnStore
const { isTrigger, balance } = storeToRefs(earnStore)

watch(isTrigger, (val) => {
  if (!val) return
  refreshBalance()
})

onMounted(refreshBalance)

const emits = defineEmits(['toPage'])

function navigate(to) {
  emits('toPage', to)
}

const tab = ref('total')
const tabs = ref([
  { label: 'label.totalPerformance', value: 'total' },
  { label: 'label.mediaPerformance', value: 'media' },
])

const goBack = () => {
  emits('back')
  turnOff()
}
</script>
<style lang="scss" scoped>
.margin-37 {
  margin-top: 0.37rem;
}
.feature {
  display: flex;

  button {
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      margin-right: 0.3125rem;
    }
  }
}
::v-deep(.head.d-flex.justify-space-between) {
  padding: 0.75rem 1rem;
}
</style>
